<script type="text/javascript">
 djConfig = {baseRelativePath: "../javascripts/dojo/"}; 
</script>

<script src="/javascripts/dojo/dojo.js" type="text/javascript"></script>


<script language="JavaScript" type="text/javascript">
	dojo.require("dojo.widget.LayoutContainer");
	dojo.require("dojo.widget.ContentPane");
	dojo.require("dojo.widget.LinkPane");
	dojo.require("dojo.widget.SplitContainer");
	dojo.require("dojo.widget.ColorPalette");
	dojo.require("dojo.widget.TabContainer");
	dojo.require("dojo.widget.Tree");
	dojo.hostenv.writeIncludes();

</script>
<script language="JavaScript" type="text/javascript">
function loadRightPane(nodename, nodeType, id)
{
    var linkPaneTab1 = dojo.widget.byId("tab1");
    //docPane.setContent("Try clicking doc0, doc1 or doc2 instead...");

    if(nodeType=='Audit')
    {
        linkPaneTab1.setUrl("/appaudit/list");
        var linkPaneTab2 = dojo.widget.byId("tab2");
        linkPaneTab2.setUrl("/appaudit/ws");
        //linkPaneTab2.setContent("No Web service available for "+nodeType );
    }

}
</script>
    <script>

        // create a variable that closures can relate to in addOnLoad and handleSubmits
        // that way we dont have to call dojo.widget.byId multiple times
        var cpane = null;

        // set up a listener for form submits inside cpane
        dojo.addOnLoad(function(){
            // set the reference for our ContentPane widget to the variable we created before
            cpane = dojo.widget.byId('tab2');
            //alert("cpane=>"+cpane);    
            // connect a event listener to contentpane domNode
            // If IE had decent DOM we could just settle with connecting a onsubmit event
            // and listen to that when it bubbled up to cpane.domNode,
            // but onsubmit events doesn't bubble in IE
            // so we are forced to iterate through document.forms
            // and create a new FormBind listener each time we load a new content
            dojo.event.connect(cpane, 'onLoad', 'setUpForm');

            // on page initial load cpane onLoad isn't called
            setUpForm();

        });

        // handle form submits
        function setUpForm(){

            //alert(document.forms.length);
            // find out if any of document.forms is a ancestor of cpane.domNode
            var node = null;
            for(var i = 0; i < document.forms.length; i++){
                if(dojo.dom.isDescendantOf(document.forms[i],cpane.domNode)){
                    node = document.forms[i];
                    //alert(node.action);
                   if(node){
                        // create a new FormBind object
                        new dojo.io.FormBind({
                            // evt.target is our formNode
                            formNode: node,
                            load: function(load, data, e) {
                                // relay the server response to cpane.setContent
                                cpane.setContent(data);
                            }
                        });
                    }
                            
                }
            }
            //alert("node=>"+node);
         };

    </script>

  <style>
    html, body{	
		width: 100%;	/* make the body expand to fill the visible window */
		height: 100%;
		overflow: hidden;	/* erase window level scrollbars */
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		background-color: #FFF;
    }
	.dojoSplitPane{
		margin: 5px;
	}
	#rightPane {
		margin: 0;
	}
   </style>
   


<div dojoType="LayoutContainer"
	layoutChildPriority='top-bottom'
	style="width: 80%; height: 70%;">

<div id="maincontent_dojo">
    
	<div dojoType="SplitContainer"
		orientation="horizontal"
		sizerWidth="5"
		activeSizing="0"
		layoutAlign="client"
	>
		<div dojoType="Tree" publishSelectionTopic="treeSelected" toggle="fade"
			 sizeMin="20" sizeShare="20">
			 
		    <div dojoType="TreeNode" title="Reports">
		     
		     <% for @report in @report_list %>
		        <div dojoType="TreeNode" title="<%=@report.name%>" onTitleClick="javascript:loadRightPane('<%=@report.name%>','Audit', '<%=@report.id%>');">

                </div>
               <%end%>
		    
		  </div>
		</div>  

		<div dojoType="SplitContainer"
			id="rightPane"
			orientation="vertical"
			sizerWidth="5"
			activeSizing="0"
			sizeMin="50" sizeShare="80"
		>
			<div id="mainTabContainer" style="width: 400px;height:300px"  dojoType="TabContainer" sizeMin="60" sizeShare="100" selectedTab="tab1">

				 <div id="tab1" dojoType="ContentPane" label="Info" cacheContent="false">
				 </div>  

				 <div id="tab2" dojoType="ContentPane" label="Webservice" cacheContent="false">
				 </div>
			</div>
		    <div dojoType="ContentPane" sizeMin="20" sizeShare="30" id="docpane" executeScripts="true">
    				
    	    </div>

		</div>
	</div>
</div>

</div>
